
<template>
  <div id="app" class="min-h-screen">
    <nav class="fixed top-0 w-full z-50 glass-effect">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold text-qinghua-blue">青花泡泡</h1>
          </div>
          
          <div class="hidden md:flex space-x-8">
            <router-link to="/" class="nav-link">首页</router-link>
            <router-link to="/raffle" class="nav-link">限量抽签</router-link>
            <router-link to="/profile" class="nav-link">我的收藏</router-link>
          </div>
          
          <div class="md:hidden">
            <button @click="toggleMenu" class="text-qinghua-blue">
              <i class="fas fa-bars text-xl"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div v-if="isMenuOpen" class="md:hidden glass-effect">
        <div class="px-2 pt-2 pb-3 space-y-1">
          <router-link to="/" class="mobile-nav-link">首页</router-link>
          <router-link to="/raffle" class="mobile-nav-link">限量抽签</router-link>
          <router-link to="/profile" class="mobile-nav-link">我的收藏</router-link>
        </div>
      </div>
    </nav>
    
    <main class="pt-16">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isMenuOpen = ref(false)

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}
</script>

<style scoped>
.nav-link {
  @apply text-qinghua-gray hover:text-qinghua-blue px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.router-link-active {
  @apply text-qinghua-blue font-semibold;
}

.mobile-nav-link {
  @apply block px-3 py-2 rounded-md text-base font-medium text-qinghua-gray hover:text-qinghua-blue hover:bg-white/10;
}
</style>
